//创建vuex中的store文件

//引入vue 和 vuex
import Vue from "vue";
import Vuex from "vuex";

//引入js数据文件到store里
import {list} from "../data.js";

//use一下使用插件
Vue.use(Vuex);

//vuex的环节创建

//需要异步操作的放这里
const actions={};

//更改state数据的地方
const mutations={

    //单个删除按钮---第一个值是state 第二个参数是传过来的值
    delOneGood(state,value){
        //把state上的list过滤，符合条件的item留下(不等于传递过来的id的item留下)，重新赋值给list
        state.list = state.list.filter((item)=>item.id !== value);
    },

    //清空购物车
    clearAll(state){
        state.list=[];

    },

    //删除选中项
    clearSelect(state){
        //把state上的list过滤，符合条件的item留下(select为false)，重新赋值给list
       state.list = state.list.filter((item)=>  item.select===false);

        // 箭头函数里的条件可以写为 !item.select(老师写法) ，把选中的状态由true反转false，未选中的状态false反转为true，然后filter是把条件为true的item留下，所可以实现删除选中项，是一种简便的写法
      
    },

    //全选按钮 影响 单选
    //Mutations里面的function有两个东西（state，value）  state是初始化的数据，value是传递的值
    changeAll(state,value){
        //遍历数据list，把收到的值赋值给list的每一个item
        state.list.forEach((item)=>{
           item.select = value;
        })

    }
};

//存放数据的地方--state
const state={
    list,
};

//通过state的数据生成新的数据的地方--都需要return
const getters={

    //总数量---选中的数量
    totalNum(state){
        //数据过滤select状态为true的item留下，形成新的数组，然后使用reduce方法，把数组里面的购买数量叠加累计，初始值为0
        return state.list.filter((item)=>item.select).reduce((prev,item) => (prev += item.buy_num ),0);

    },

    //总价格---选中的数量*单价并相加
    totalPrice(state){
        //filter过滤是把条件为true的item留下 形成新的数组，可以继续使用数组方法reduce进行叠加累计,把选中的商品的数量*商品单价再进行叠加，返回总和，初始值为0
        return state.list.filter((item)=>item.select).reduce((prev,item)=>(prev+item.buy_num*item.price),0)
    },

    //list的长度---返回state里的list的长度
    total(){
        return state.list.length;
    },

    //已选数量---叠加累计选中状态为true的item数量
    //布尔值加减会转换为数字，真为1，假为0，所以箭头函数里的条件是把list的所有select加了一遍，简写写法
    selectTotal(){
        return state.list.reduce((prev,item)=>(prev += item.select),0)
    }
};

//new一个vuex创建store，并且暴露出去
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters,
})